<!--  -->
<template>
  <div>
    <Card>
      <div slot="title" >
         <Button v-if="btnp.appmkuai_tjmk" @click="handleClickAdd" class="zh-hollow" type="primary" icon="plus-round">添加模块</Button>
      </div>
      <Table :loading="loading" border :columns="columns" :data="data"></Table>
      <Page  :total="total" show-total show-sizer :current.sync="formItem.pageNumber" @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
    </Card> 
    <Modal v-model="modal_module" :title="modalTitle"  :loading="saveloading" @on-ok="save" ok-text="保存" cancel-text="放弃操作" :mask-closable="false">
      <Form :model="ddwModule" :label-width="80" style="padding:15px 30px;">
        <FormItem label="模块名称*">
          <Input v-model="ddwModule.module_name" ></Input>
        </FormItem>
        <FormItem label="模块编码*">
          <Input v-model="ddwModule.module_event_code" ></Input>
        </FormItem>
        <FormItem label="模块描述*">
          <Input v-model="ddwModule.comment" ></Input>
        </FormItem>
        <FormItem label="小图*">
			<template v-if="!!ddwModule.smallPic.url">
				<div class="upload-wrap" v-if="ddwModule.smallPic.status === 'finished'">
					<img :src="domain+ddwModule.smallPic.url" style="display:block;width:120px;height:120px;">
					
					<div class="upload-cover">
							<div class="iconBox">
								<Icon type="ios-eye-outline" @click.native="handleView(ddwModule.smallPic.url)"></Icon>
								<Icon type="ios-trash-outline" @click.native="handleRemove(ddwModule.smallPic.url)"></Icon>
							</div> 
							
						</div>
				</div>
				<template v-else>
					<Progress v-if="ddwModule.smallPic.showProgress" :percent="ddwModule.smallPic.percentage" hide-info></Progress>
				</template>
			</template>
			<template v-else>
				<Upload
					ref="upload"
					:show-upload-list="false"
					:on-success="handleSuccess"
					:format="['jpg','jpeg','png']"
					:max-size="2048"
					:on-format-error="handleFormatError"
					:on-exceeded-size="handleMaxSize"
					:before-upload="handleBeforeUpload"
					type="drag"
					:data="upLoadData"
					action=" http://upload.qiniup.com"
					style="display: inline-block;width:120px;height:120px;">
					<div style="width:120px;height:120px;line-height:120px;">
						<Icon type="ios-plus-empty" :size='40'></Icon>
					</div>
				</Upload>
			</template>
        </FormItem>
        <FormItem label="大图*">
			<template v-if="!!ddwModule.bigPic.url">
				<div class="upload-wrap big" v-if="ddwModule.bigPic.status === 'finished'">
					<img :src="domain+ddwModule.bigPic.url" style="display:block;width:240px;height:120px;">
					
					<div class="upload-cover">
							<div class="iconBox">
								<Icon type="ios-eye-outline" @click.native="handleView(ddwModule.bigPic.url)"></Icon>
								<Icon type="ios-trash-outline" @click.native="bigHandleRemove(ddwModule.bigPic.url)"></Icon>
							</div> 
							
						</div>
				</div>
				<template v-else>
					<Progress v-if="ddwModule.bigPic.showProgress" :percent="ddwModule.bigPic.percentage" hide-info></Progress>
				</template>
			</template>
			<template v-else>
				<Upload
					ref="bigUpload"
					:show-upload-list="false"
					:on-success="bigHandleSuccess"
					:format="['jpg','jpeg','png']"
					:max-size="2048"
					:on-format-error="handleFormatError"
					:on-exceeded-size="handleMaxSize"
					:before-upload="bigHandleBeforeUpload"
					type="drag"
					:data="upLoadData"
					action=" http://upload.qiniup.com"
					style="display: inline-block;width:240px;height:120px;">
					<div style="width:240px;height:120px;line-height:120px;">
						<Icon type="ios-plus-empty" :size='40'></Icon>
					</div>
				</Upload>
			</template>
        </FormItem>
      </Form>
    </Modal>  
    <Modal title="查看图片" v-model="look_pic_wrap.look_pic" class="no_footer_modal">
      <!-- <p slot="header" >查看图片</p> -->
      <img style="width:100%;" :src="domain+look_pic_wrap.src" alt="">
    </Modal>
  </div>
</template>

<script>
import {getQiniuToken} from '@/libs/get.js'
import util from '@/libs/util.js'
import {
	getAppModuleTable,
	deleteAppModule,
	saveAppModule
} from '@/libs/system.js'
export default {
	name:'',
  	data () {
		return {
			saveloading:true,
			domain:this.$store.state.app.domain,
            upLoadData:{
                token:'',
                unique_names: true,
                domain:this.$store.state.app.domain
            },
			formItem:{
				pageNumber:1,
				pageSize:10
			},
			btnp:{},
			btn:{
				appmkuai_tjmk:false,
				appmkuai_bj:false,
				appmkuai_sc:false
			},
			look_pic_wrap:{
				look_pic:false,
				src:''
			},
			ddwModule:{
				uuid:'',
				module_name:'',
				module_event_code:'',
				comment:'',
				image_url:'',
				doubled_image_url:'',
				bigPic:{
					name:'',
                    url:'',
                    status:'',
                    showProgress:true,
                    percentage:0
				},
				smallPic:{
					name:'',
                    url:'',
                    status:'',
                    showProgress:true,
                    percentage:0
				}
			},
			modal_module:false,
			modalTitle:'',
			total:6,
			loading:true,
			columns:[
				{
					key:'module_name',
					title:'模块名称',
					align:'center',
					minWidth:100
				},{
					key:'module_event_code',
					title:'模块编码',
					align:'center',
					minWidth:100
				},{
					key:'comment',
					title:'模块描述',
					minWidth:200,
					align:'center'
				},{
					key:'time',
					title:'新增时间',
					align:'center',
					minWidth:150
				},{
					key:'images',
					title:'查看图片',
					align:'center',
					minWidth:120,
					render:(h,params)=>{
						return h('div',[
							h('Button',{
								props:{
								type:'text',
								size:'small'
								},
								style:{
								color:'#2D8CF0'
								},
								on:{
								click:()=>{
									this.handleView(params.row.image_url)
								}
								}
							},'小图'),
							h('Button',{
								props:{
								type:'text',
								size:'small'
								},
								style:{
								color:'#2D8CF0'
								
								},
								on:{
								click:()=>{
									this.handleView(params.row.doubled_image_url)
								}
								}
							},'大图')
							]
						)
					}
				},{
					key:'action',
					title:'操作',
					align:'center',
					fixed:'right',
					minWidth:120,
					render:(h,params)=>{
						return h('div',[
						h('Button',{
							props:{
							type:'text',
							size:'small'
							},
							style:{
							color:'#2D8CF0',
							display:this.btnp.appmkuai_bj?'inline-block':'none'
							},
							on:{
							click:()=>{
								this.modal_module=true;
								this.modalTitle='编辑模块信息';
								this.gotoEdit(params.row);
							}
							}
						},'编辑'),
						h('Button',{
							props:{
							type:'text',
							size:'small'
							},
							style:{
							color:'#EA0000',
							display:this.btnp.appmkuai_sc?'inline-block':'none'
							},
							on:{
							click:()=>{
								let config={
								title:'删除模块',
								content:'删除后该模块无法恢复，只能重新添加。',
								okText:'删除',
								cancelText:'放弃操作',
								onOk:()=>{
									this.delete(params.row.uuid)
								}
								}
								this.$Modal.confirm(config)
							}
							}
						},'删除')
						])
					}
				}
			],
			data:[]     
		};
	},
	methods:{
		gotoEdit(obj){
			this.ddwModule={
				uuid:obj.uuid,
				module_name:obj.module_name,
				module_event_code:obj.module_event_code,
				comment:obj.comment,
				image_url:'',
				doubled_image_url:'',
				smallPic:{
					name:'',
                    url:obj.image_url,
                    status:!!obj.image_url?'finished':'',
                    showProgress:true,
                    percentage:0
				},
				bigPic:{
					name:'',
                    url:obj.doubled_image_url,
                    status:!!obj.doubled_image_url?'finished':'',
                    showProgress:true,
                    percentage:0
				}
			}
		},
		async save(){
			if(this.ddwModule.module_name==''){
                this.$Notice.error({
                    desc:'请输入名称'
                })
            }else if(this.ddwModule.module_event_code==''){
                this.$Notice.error({
                    desc:'请输入模块编码'
                })
            }else if(this.ddwModule.comment==''){
                this.$Notice.error({
                    desc:'请输入模块描述'
                })
            }else if(this.ddwModule.smallPic.url==''){
                this.$Notice.error({
                    desc:'请上传小图'
                })
            }else if(this.ddwModule.bigPic.url==''){
                this.$Notice.error({
                    desc:'请上传大图'
                })
            }else{
				let form =JSON.parse(JSON.stringify(this.ddwModule));
				form.image_url=form.smallPic.url;
				form.doubled_image_url=form.bigPic.url;
				let res=await saveAppModule(form);
				let response=res.data;
				if(response.code==200){
					this.$Notice.success({
						desc:'已保存'
					});
					this.getTable();
					this.modal_module=false;
				}else{
					this.$Notice.error({
						desc:response.msg
					})
				}
			}
			let that=this;
            this.saveloading=false;
            setTimeout(()=>{
                that.saveloading=true;
            },500)
		},
		async delete(uuid){
            let res=await deleteAppModule(uuid);
            let response=res.data;
            if(response.code==200){
                this.$Notice.success({
                    desc:"已删除"
                });
				this.formItem.pageNumber=1;
				this.getTable();
            }else{
                this.$Notice.error({
                    desc:response.msg
                })
            }
		},
		async qiniuToken(){
            let res=await getQiniuToken();
            let response=res.data;
            if(response.code===200){
                this.upLoadData.token=JSON.parse(response.data).uptoken;
            }else{
                this.$Notice.error({
                    title: '请求出错',
                    desc:response.msg
                });
            }
        },
		pageSizeChange(size){
            //回到第一页
            this.formItem.pageNumber=1;
            this.formItem.pageSize=size;
            this.getTable();
        },
        pageChange(number){
            this.formItem.pageNumber=number;
            this.getTable();
        },
        async getTable(){
            this.loading=true;
            let form=JSON.parse(JSON.stringify(this.formItem));
            let res=await getAppModuleTable(form);
            if(res.status===200){
                let response=res.data;
                if(response.code===200){
                    this.total=response.data.total;
                    this.data=response.data.rows.map(item=>{
                        item.time=item.created.slice(0,16);
                        return item
                    })
                    this.loading=false;
                }else{
                    this.$Notice.error({
                        desc:response.msg
                    });
                }
            }else{
                this.$Notice.error({
                    title: '请求失败'
                });
            } 
        },
		handleClickAdd(){
			this.modal_module=true;
			this.modalTitle='新增模块';
		},
		handleView(img){
            this.look_pic_wrap.look_pic=true;
            this.look_pic_wrap.src=img
        },
        handleRemove(img){
            this.uploadList=[];
            this.ddwModule.smallPic={
                name:'',
                url:'',
                status:'',
                showProgress:true,
                percentage:0
            }
		},
		bigHandleRemove(img){
            this.uploadList=[];
            this.ddwModule.bigPic={
                name:'',
                url:'',
                status:'',
                showProgress:true,
                percentage:0
            }
        },
        handleSuccess (res, file) {
            this.ddwModule.smallPic=file;
            this.ddwModule.smallPic.url=res.hash;
		},
		bigHandleSuccess (res, file) {
            this.ddwModule.bigPic=file;
            this.ddwModule.bigPic.url=res.hash;
        },
        handleFormatError (file) {
            this.$Notice.warning({
                title: '图片格式错误',
                desc: '请选择 jpg 或 png 格式的图片'
            });
        },
        handleMaxSize (file) {
            this.$Notice.warning({
                title: '图片过大',
                desc: '请选择文件大小小于2M的图片'
            });
        },
        handleBeforeUpload (file) {
            const check = this.$refs.upload.fileList.length < 2;
            if (!check) {
                this.$Notice.warning({
                    title: '一次只能上传一张'
                });
            }
            return check;
		},
		bigHandleBeforeUpload (file) {
            const check = this.$refs.bigUpload.fileList.length < 2;
            if (!check) {
                this.$Notice.warning({
                    title: '一次只能上传一张'
                });
            }
            return check;
        }
	},
	watch:{
		modal_module:function(){
			if(!this.modal_module){
				this.ddwModule={
					uuid:'',
					module_name:'',
					module_event_code:'',
					comment:'',
					image_url:'',
					doubled_image_url:'',
					bigPic:{
						name:'',
						url:'',
						status:'',
						showProgress:true,
						percentage:0
					},
					smallPic:{
						name:'',
						url:'',
						status:'',
						showProgress:true,
						percentage:0
					}
				}
			}else{
				this.qiniuToken();
			}
		}	
	},
	created(){
		this.btnp=util.bpower(this,this.btn);
		this.getTable();
  	}
	
}

</script>
<style lang='scss' >
.upload-wrap{
    width:120px;
    height:120px;
    text-align:center;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.2);
}
.upload-wrap.big{
	width:240px;
}
.iconBox{
    display:inline-block;
    position:absolute;
    top:50%;
    left:50%;
   transform: translateX(-50%) translateY(-50%);

}
.upload-cover{
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.6);
    i{
        color: #fff;
        font-size: 30px;
        cursor: pointer;
        margin: 0 10px;
    }
}
.upload-wrap:hover .upload-cover{
    display: block;
}
</style>